<template>
<div class="model-features">
    <title-bar title="特征重要性"></title-bar>
    <ve-histogram :colors="['#3F9EFF']" :data-zoom="dataZoom" :data-empty="chartData.rows.length===0" :legend-visible="false" width="100%" height="400px" :data="chartData" :extend="extend" :settings="chartSettings"></ve-histogram>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'ModelFeatures',
    components: {
        TitleBar
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            dataZoom: [
                {
                    type: 'slider',
                    zoomLock: true,
                    showDetail: false,
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 50,
                    height: 15
                }
            ],
            extend: {
                grid: {
                    y: 30,
                    left: '100px',
                    right: '100px'
                },
                series: {
                    barMaxWidth: 30,
                    showSymbol: false
                },
                xAxis: {
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                },
                label: { show: false, position: 'top' }
            },
            chartSettings: {
                digit: 4,
                yAxisName: ['特征系数'],
                labelMap: {
                    'value': '特征系数'
                }
            },
            chartData: {
                columns: [],
                rows: []
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            let rows = this.modelDetail.summary.modelsummary.trainresult.FeatureWeight.rows
            this.chartData = {
                columns: ['name', 'value'],
                rows
            }
            this.dataZoom[0].end = rows.length > 16 ? parseInt(1600 / rows.length) : 100
        }
    }
}
</script>
